<template>
    <ContentBox title="实时数据共享">
        <div class="hldata">
            <div class="top">
                <div>
                    <div>
                        <span class="digiter-number digiterfontSize80">13246</span><span>项</span>
                    </div>
                    <div>
                        今日共调整
                    </div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number digiterfontSize80">13246</span><span>项</span>
                    </div>
                    <div>
                        今日共调整
                    </div>
                </div>
                <div>
                    <div>
                        <span class="digiter-number digiterfontSize80">13246</span><span>项</span>
                    </div>
                    <div>
                        今日共调整
                    </div>
                </div>
            </div>
            <div class="bottom">
                <gedanweifenlei></gedanweifenlei>
            </div>
        </div>
    </ContentBox>
</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"
    import gedanweifenlei from "./ChartsComponents/shishishujugongxiang"
    export default {
        name: "Preview",
        components: {
            ContentBox,
            gedanweifenlei
        }
    }
</script>

<style lang="scss" scoped>
.hldata{
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    >div{
        &.top{
            height: 20%;
            display: flex;

            >div{
                border-radius: 40px;
                flex:1;
                /*background: red;*/
                margin:0 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                &:nth-of-type(1){
                    span{
                        color: #EA4747;
                    }
                }
                &:nth-of-type(2){
                    span{
                        color: #02C7C4;
                    }
                }
                &:nth-of-type(3){
                    span{
                        color: #FEAC9C;
                    }
                }

                >div{
                    font-size: 40px;
                    &:first-child{
                        >span{
                            &:first-child{
                                font-size: 80px;
                            }
                        }
                    }




                    &:last-child{
                        font-size: 40px;
                    }
                }


            }

        }
        &.bottom{
            height: 80%;
        }
    }
}
</style>
